iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
0

https://ithelp.ithome.com.tw/upload/images/20200926/20116357drxlmnHoD2.jpg

了解使用 Elementor 在 WordPress 中構建美觀而有效的登錄頁面的簡單,直觀和不需要程式碼的方法。

Yes


有很多方法可以構建成功的登錄頁面。

為什麼要遵循此特定教程,而不要遵循其他教程?
您可能會問,本分步教程具有幾個關鍵優勢:

  • 免費的登陸頁面構建器 – 使用的免費 WordPress 登陸頁面構建器來構建登陸頁面,而無需其他 WordPress 外掛
  • 無需編碼 - 您不必處理一行 CSS 或 PHP 代碼,也不需要處理子主題 - 或任何與此相關的技術知識。
  • 高轉換率 – 我們在本指南中著重於訪問著陸頁,該頁面不僅看起來漂亮,而且旨在產生更高的轉換率。

讓我們首先快速瀏覽一下今天將要構建的登錄頁面。


什麼是登陸頁面?

著陸頁是您網站上專門為特定營銷活動創建的頁面。著陸頁是在考慮明確的號召性用語 (CTA) 目標的情況下完成的,它們通常比常規博客文章或網站頁面產生更高的轉化率。它們也是生成潛在客戶和創建用於營銷目的的電子郵件列表以及加強社交媒體中的存在的良好來源。

著陸頁和常規頁之間有一些區別,例如首頁,它們的頁首和頁尾 選單 鏈接較少或沒有,它們更具可視性,並且往往具有清晰的消息傳遞。對目標網頁進行分類的最常見方法是潛在客戶生成網頁和點擊型網頁。

初始設置

要成功遵循本指南,您需要:

您可以在域名和託管下使目標網頁處於活動狀態,也可以使用諸如 Flywheel 的 Local 之類的軟件將其本地存儲在電腦之上。

您將建立的目標網頁

您將創建一個頁面,其中包括:

  • 頁首 - 這佔用了我們大部分的屏幕空間。它由標題,一些文字和號召性用語組成-會將用戶帶到我們的表單。
  • 選單部分 - 此區域可幫助網站訪問者快速導航到目標網頁的任何部分。
  • 關於部分 - 一個重要的部分,它告訴訪問者更多有關我們的業務或服務的信息。
  • 功能部分 - 功能列表,左側有大圖。
  • 圖庫部分 - 在本部分中,我們使用小部件的組合以及一些圖像,文本,社交圖標和視頻背景創建了獨特的畫廊佈局。
  • 表單部分 - 在此處,我們包含了一個聯繫表單,該表單將使我們的訪客可以輕鬆地與我們聯繫。

步驟 1:設置顏色,字體和顏色選擇器

在開始實際的著陸頁設計之前,正確設置 視覺編輯器 很重要。

我們首先選擇 Elementor Canvas 頁面佈局。這為我們提供了一個乾淨的頁面,沒有頁首,頁局或 資訊欄。建立目標網頁時,這是一個不錯的選擇。

然後,我們將默認顏色設置如下:主要顏色是白色,次要顏色和文本-黑色。添加新的小部件時,將自動設置默認顏色,從而使我們的工作更加輕鬆。

讓我們對字體做同樣的事情。我已經將主要和輔助標題字體設置為 Adobe Typekit 字體,但是您可以根據需要設置自己的字體。

關於顏色選擇器,我們設置了顏色,因此在構建頁面時可以快速訪問它們。


步驟 2:著陸頁的頂部

登陸頁面主視覺
我們頂部的淺藍色部分包括標題,文本編輯器和按鈕工具件。

這裡有什麼特別之處:背景圖像混合模式和重疊的標題。

我們是如何做到的:我們將背景色設置為藍色。背景疊加層為我們提供了在頂部設置另一層的選項,這一次是設置圖像疊加層。混合模式是 Elementor 2.1 中的新選項。它的作用是將覆蓋層與淺藍色背景混合。我們選擇相乘或加深,然後檢查這如何影響圖像。

為了使標題重疊,我們轉到第一個標題的高級設置,並在底部添加一個負邊距。


步驟 3:標題和導航區域

著陸頁頁首,導航區域有 3 列,包括一個圖像小部件,一個選單小工具和一個按鈕。

這裡的特殊之處:導航鏈接可幫助訪問者滾動到頁面中的相關點。

我們是如何做到的:我們稍後將使用 錨點 (Anchor) 小部件實現此功能。菜單有 3 個鏈接:關於,功能和圖庫。每個鏈接都使用井號標籤連接到相關部分。


步驟 4:關於區域

登陸頁面關於
關於區域將是一個單列區域。它將包括圖標,標題 和文本編輯器小部件。這部分很簡單。標題與頂部標題具有相同的樣式,我們只更改了陰影一點。

這裡有什麼特別的:圖標顯示為被標題覆蓋

我們是如何做到的:我們減小了圖標的大小,並設置了一個底邊減去負的邊距。


步驟 5:設計功能區域

此功能部分包括左側的大 Vespa 圖像和右側的 3 個服務列表。

此處有什麼特別之處:對於此功能部分,我們重複上一部分中使用的背景圖標效果。

我們如何做到的:為了獲得這種效果,我們將圖標小部件的邊距設置設置為底部邊距 40px,左側邊距 -20。我們可以將此首次服務重複 3 次。

提示 — 如果您要復制的部分或任何其他元素,請首先使其可 移動,然後再進行複制。


步驟 6:圖庫區

登陸頁面畫廊
我們要添加的下一個區域是 圖片庫。在這裡,我們有一個大標題,還有一個由號召性用語和其他小部件組成的網格。這裡有什麼特別之處:畫廊網格由各種小部件組成

我們如何做到的:

為了創建這個像畫廊一樣的網格,我們將使用欄位 (Columns) 小部件來創建一個內部部分。 我們將結合幾個小部件和一個背景視頻,以創建一個風格獨特的畫廊。 我們使用 空白欄位 (Spacer) 小部件,因此我們可以在左列設置背景顏色。我們對中心列執行相同的操作。
我們還添加了另一個列小部件部分,這一次我們將在樣式下設置影片的背景類型。在新的 Elementor 2.1 中,您可以設置視頻的開始時間和結束時間。這對於創建後台循環非常有用。


步驟 7:聯絡區域和聯絡表格

登陸頁面號召性用語表格
這是我們的聯繫區域,它是每個頁面的重要組成部分,允許訪問者與網站所有者進行交流。使用 Elementor 的可視表單構建器,我們可以輕鬆設置聯繫表單並自定義其樣式以適合整個頁面。我們還可以使用 Elementor 的內置表單集成功能將其無縫連接到諸如 MailChimp 的電子郵件營銷服務

這裡有什麼特別之處:背景混合模式效果

我們是如何做到的:添加圖像疊加層並使用混合模式乘以設置進行設置。


其他技巧:固定選單和錨點

我們希望菜單保持粘性並在向下滾動時保持在頂部。

這裡的特別之處:帶有 導航超連結 的便利選單

我們是如何做到的:我們將通過選擇編輯部分,高級,滾動效果,固定頂部來進行設置。我們可以設置將其粘在哪些設備上,以及與頂部的間距。我們還添加了錨點,以便訪問者能夠輕鬆瀏覽頁面。為此,我們在每個部分中拖動錨點小部件。


最後的技巧:隱藏導航

現在有關導航的一些技巧;如您所見,導航區域在整個站點中都是可見的,但是如果我們想稍微隱藏一下該怎麼辦?

這裡有什麼特別之處:當用戶滾動到頁面上的某個點時,隱藏導航。

我們是如何做到的:我們將選擇導航部分,高級,在 z-index 下給它一個
在 Gallery 區域設置下,給它一個樣式,給它一個白色背景。在高級選項卡下,z-index 將其設置為 2。這意味著它應該覆蓋菜單部分。讓我們看看這是否有效。我們將向下滾動並簽出-導航已結束。


讓我們看看結果...

讓我們來看看我們已經創建了什麼。看起來很酷吧?

登陸頁面 WordPress
使用著陸頁範本而不是從頭開始構建
在本文中,您學習了從頭開始構建登錄頁面的過程,這是我們完成了登錄頁面每個部分的創建過程的過程。

另一種方法是使用 Elementor 的登錄頁面模板並根據需要自定義它們。您可以在 Elementor 的免費和 Pro 範本庫中找到一百多個全頁範本。瀏覽列表,然後選擇最適合您的列表。

另一個選擇是使用 Elementor 塊來快速構建著陸頁的各種元素。阻止類別包括英雄,號召性用語,常見問題,服務以及您可能需要的其他部分。


登陸頁面的 WordPress 免費/高級主題

我們遇到的一個常見問題是哪個 WordPress 佈景主題 最適合 Elementor。但是,答案實際上是任何主題。

由於您使用的是 Canvas 空白範本,因此整個登錄頁面都是內置的 Elementor。選擇一個簡單的主題是確保快速加載目標頁面的好方法。

您可以使用以下一些很棒的免費主題:

這些主題還帶有 Elementor 範本,可用於您的目標網頁。

動態內容-從一個地方控制多個登陸頁面
本教程的重點是創建靜態登錄頁面,但您可以輕鬆創建登錄頁面模板,並使用 Elementor 的動態內容功能將該模板屬性應用於多個登錄頁面。這樣,您可以對單個模板進行更改,並使它影響您的登錄頁面。


引用官方文獻和參考來源:
如何使用 Elementor 建立 Landing Page 教學


上一篇
Elementor 教學 24 | 善用圖示 icon / 小圖示 (Icon Library) 強化頁面的辯識度
下一篇
Elementor 教學 26 | 實作簡單的登陸頁面 (Landing Page) - (2)
系列文
Elementor 教學 - 如何使用 WordPress 建立一頁式銷售網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言